<template>
  <div id="app">
    <div class="amap-wrapper">
      <el-amap 
        class="amap-box" 
        :vid="'amap-vue'"
        :zoom="zoom"
        :plugin="plugin"
        :center="center"
      >
        <div>
          <el-amap-marker 
            v-for="(marker, index) in markers" 
            :key="index" 
            :position="marker.position" 
            :events="marker.events" 
            :visible="marker.visible"
            :vid="index"
          ></el-amap-marker>
        </div>
        <div>
          <el-amap-text
            v-for="(text, index) in markers"
            :key="index" 
            :text="text.text"
            :offset="text.offset"
            :position="text.position"
          ></el-amap-text>
        </div>
      </el-amap>
      <div class="foo"></div>
      <div id="viewer"></div>
    </div>
  </div>
</template>

<script>
import PhotoSphereViewer from 'photo-sphere-viewer'
import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'

export default {
  data () {
    return {
      link: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4258590744,1177682261&fm=26&gp=0.jpg',
      zoom: 16,
      center: [106.596434, 29.496947],
      plugin: [{
        pName: 'MapType',
        defaultType: 1,
      }],
      markers: [
        {
          position: [106.5961134, 29.497447],
          text: "XX公园",
          offset: [50, -15],
          events: {
            click: () => {
              console.log(this.markers[0].position[0])
              this.link = "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4258590744,1177682261&fm=26&gp=0.jpg"
              this.destroy()
              this.initPhotoSphere()
            }
          },
          visible: true,
        }, {
          position: [106.595734, 29.495947],
          text: "ZZ公园",
          offset: [50, -15],
          events: {
            click: () => {
              this.link = "https://gw.alicdn.com/tfs/TB1WSInRFXXXXXlXpXXXXXXXXXX-1200-600.jpg",
              this.destroy()
              this.initPhotoSphere()
            }
          },
          visible: true,
          template: '<span>1</span>',
      }]
    }
  },
  mounted() {
			this.initPhotoSphere()
  },
  methods: {
    initPhotoSphere() {
      this.PSV = PhotoSphereViewer({
        panorama: this.link,
        size: {
          width: '100%',
          height: '250px'
        },
        container: document.getElementById("viewer"),
        navbar: [
          'autorotate',
          'zoom',
          'caption'
        ]
      })
    },
    destroy() {
      this.$destroy
			document.getElementById('viewer').innerHTML = "";
    }
  }
}
</script>

<style>
.amap-wrapper {
  width: 100%;
  height: 250px;
}

#app {
  background-color: #fff;
  width: 100%;
  position: relative;
}

.amap-wrapper{
  margin-top: 60px;
}

#view {
  width: 100%;
}

.foo {
  width: 100%;
  height: 30px;
}

</style>